// pages/scroll/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    scrollheight: '',
    chosed_index: 0,
    cateList: [{
        id: 1,
        name: '类别1'
      },
      {
        id: 2,
        name: '类别2'
      },
      {
        id: 3,
        name: '类别3'
      },
      {
        id: 4,
        name: '类别4'
      },
      {
        id: 5,
        name: '类别5'
      },
      {
        id: 6,
        name: '类别6'
      },
    ],
    chosed_cate_id: '',
    activeValue: 0,
    imageList: [
      'https://picsum.photos/id/99/1300/700',
      'https://picsum.photos/id/98/1300/700',
      'https://picsum.photos/id/93/1300/700',
      'https://picsum.photos/id/96/1300/700',
    ],
    // 轮播图自动切换时间间隔
    interval: 5000,
    //轮播图进度条的计时器
    progressNumInterval: null,
    //轮播图进度条的进度
    progressNum: 0,
    goods_list: [{
        type_id: 1,
        type_name: '类别1',
        list: [{
            goods_name: '视觉差滑动魔法',
            img: 'https://picsum.photos/id/1/260',
            // price: 356.00,
            id: 1,
          },
          {
            goods_name: 'sku多规格客户端展示',
            img: 'https://picsum.photos/id/2/260',
            // price: 356.00,
            id: 2
          },
        ]
      },
      {
        type_id: 2,
        type_name: '类别2',
        list: [{
            goods_name: '购物车滑动删除',
            img: 'https://picsum.photos/id/3/260',
            price: 356.00,
            id: 3
          },
          {
            goods_name: '小程序echarts',
            img: 'https://picsum.photos/id/4/260',
            price: 356.00,
            id: 4
          },
          {
            goods_name: '巴啦啦门路沙地柏阿实践活动氨基酸的07',
            img: 'https://picsum.photos/id/5/260',
            price: 356.00,
            id: 5
          },
          {
            goods_name: '巴啦啦门路沙地柏阿实践活动氨基酸的08',
            img: 'https://picsum.photos/id/6/260',
            price: 356.00,
            id: 6
          },
        ]
      },
      {
        type_id: 3,
        type_name: '类别3',
        list: [{
            goods_name: '巴啦啦门路沙地柏阿实践活动氨基酸的09',
            img: 'https://picsum.photos/id/7/260',
            price: 356.00,
            id: 7
          },
          {
            goods_name: '巴啦啦门路沙地柏阿实践活动氨基酸的10',
            img: 'https://picsum.photos/id/8/260',
            price: 356.00,
            id: 8
          },
          {
            goods_name: '巴啦啦门路沙地柏阿实践活动氨基酸的11',
            img: 'https://picsum.photos/id/1/260',
            price: 356.00,
            id: 9
          },
          {
            goods_name: '巴啦啦门路沙地柏阿实践活动氨基酸的12',
            img: 'https://picsum.photos/id/1/260',
            price: 356.00,
            id: 10
          },
        ]
      },
      {
        type_id: 4,
        type_name: '类别4',
        list: [{
            goods_name: '巴啦啦门路沙地柏阿实践活动氨基酸的13',
            img: 'https://picsum.photos/id/1/260',
            price: 356.00,
            id: 11
          },
          {
            goods_name: '巴啦啦门路沙地柏阿实践活动氨基酸的14',
            img: 'https://picsum.photos/id/1/260',
            price: 356.00,
            id: 12
          },
          {
            goods_name: '巴啦啦门路沙地柏阿实践活动氨基酸的13',
            img: 'https://picsum.photos/id/1/260',
            price: 356.00,
            id: 13
          },
          {
            goods_name: '巴啦啦门路沙地柏阿实践活动氨基酸的14',
            img: 'https://picsum.photos/id/1/260',
            price: 356.00,
            id: 14
          },
        ]
      },
      {
        type_id: 5,
        type_name: '类别5',
        list: [{
            goods_name: '巴啦啦门路沙地柏阿实践活动氨基酸的17',
            img: 'https://picsum.photos/id/1/260',
            price: 356.00,
            id: 15
          },
          {
            goods_name: '巴啦啦门路沙地柏阿实践活动氨基酸的18',
            img: 'https://picsum.photos/id/1/260',
            price: 356.00,
            id: 16
          },
          // {
          //   goods_name:'巴啦啦门路沙地柏阿实践活动氨基酸的19',
          //   img:'https://picsum.photos/id/1/260',
          //   price:356.00,
          // },
          // {
          //   goods_name:'巴啦啦门路沙地柏阿实践活动氨基酸的19',
          //   img:'https://picsum.photos/id/1/260',
          //   price:356.00,
          // },
          // {
          //   goods_name:'巴啦啦门路沙地柏阿实践活动氨基酸的19',
          //   img:'https://picsum.photos/id/1/260',
          //   price:356.00,
          // },
          // {
          //   goods_name:'巴啦啦门路沙地柏阿实践活动氨基酸的19',
          //   img:'https://picsum.photos/id/1/260',
          //   price:356.00,
          // }, {
          //   goods_name:'巴啦啦门路沙地柏阿实践活动氨基酸的19',
          //   img:'https://picsum.photos/id/1/260',
          //   price:356.00,
          // },
          // {
          //   goods_name:'巴啦啦门路沙地柏阿实践活动氨基酸的19',
          //   img:'https://picsum.photos/id/1/260',
          //   price:356.00,
          // },
          // {
          //   goods_name:'巴啦啦门路沙地柏阿实践活动氨基酸的20',
          //   img:'https://picsum.photos/id/1/260',
          //   price:356.00,
          // },
          // {
          //   goods_name:'巴啦啦门路沙地柏阿实践活动氨基酸的20',
          //   img:'https://picsum.photos/id/1/260',
          //   price:356.00,
          // },
          // {
          //   goods_name:'巴啦啦门路沙地柏阿实践活动氨基酸的20',
          //   img:'https://picsum.photos/id/1/260',
          //   price:356.00,
          // },
        ]
      },
      {
        type_id: 6,
        type_name: '类别6',
        list: []
      },
    ],
    toTitle: "",
    top: [],
    showGoods: false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let windowHeight = wx.getSystemInfoSync().windowHeight // 屏幕的高度
    console.log(windowHeight)
    let windowWidth = wx.getSystemInfoSync().windowWidth // 屏幕的宽度
    wx.createSelectorQuery().select('#top').boundingClientRect((rect) => {
      console.log(rect)
      this.setData({
        scrollheight: windowHeight - rect.height - 10
      })
    }).exec();

    this.setData({
      chosed_cate_id: this.data.cateList[0].id
    })
    // 设置每个分类的开始高度
    let top = [];
    for (var i = 0; i < this.data.goods_list.length; i++) {
      wx.createSelectorQuery().select('#title-' + this.data.goods_list[i].type_id).boundingClientRect(function (rect) {
        // console.log(rect);
        var isTop = Number(rect.top);
        top.push(isTop);
      }).exec();
    }
    this.setData({
      top: top
    });
  },
  hearderItem(e) {
    const item = e.currentTarget.dataset.item
    if (item.id == 1) {
      wx.navigateTo({
        url: '/mypages/visionDifference/index',
      })
    } else if (item.id == 2) {
      this.setData({
        showGoods: true
      })
    }else if(item.id == 3){
      wx.navigateTo({
        url: '/mypages/goods/index',
      })
    }else if(item.id == 4){
      wx.navigateTo({
        url: '/mypages/echart/index',
      })
    }
  },
  onAnimationfinish(e) {
    this.progressLineInterval();
    this.setData({
      activeValue: e.detail.current
    })

  },
  progressLineInterval() {
    clearInterval(this.data.progressNumInterval)
    // 清理小圆点的进度
    this.setData({
      progressNum: 0,
    })
    /**
     * 轮播图的切换时间为5秒，进度条的进度为1-100%，
     * 因为5000/100=50毫秒，所以每50毫秒就要执行1个进度点
     * 另外需要把计时器寄存在data{}对象上，否则会清理不掉上一个计时器
     * */
    this.data.progressNumInterval = setInterval(() => {
      let progressNum = this.data.progressNum;
      // console.log(progressNum)
      if (progressNum < 100) {
        progressNum++;
      } else {
        progressNum = 0;
        // 清理进度条的计时器
        clearInterval(this.data.progressNumInterval)
      }
      this.setData({
        progressNum: progressNum
      })
    }, 50)
  },
  /**
   * 选中分类
   */
  choseCate(e) {
    let {
      id,
      index
    } = e.currentTarget.dataset;
    this.setData({
      chosed_cate_id: id,
      chosed_index: index,
      toTitle: "title-" + id,
    })
  },
  //滚动
  onScroll(e) {
    let {
      scrollTop
    } = e.detail;
    let length = this.data.top.length;
    for (var i = 0; i < this.data.top.length; i++) {
      if (this.data.top[i] - this.data.top[0] <= scrollTop && (i < length - 1 && this.data.top[i + 1] - this.data.top[0] > scrollTop)) {
        if (this.data.chosed_index != i) {
          this.setData({
            chosed_index: i,
          });
        }
      }
    }
    if (scrollTop >= this.data.top[length - 1] - this.data.top[0]) {
      console.log(this.data.top[length - 1] - this.data.top[0])
      this.setData({
        chosed_index: length - 1,
      });
    }
  }

})